<!--@author vidy3587@gmail.com-->
<template>
  <div class="short-video-page with-padding-bottom">
    <div class="with-banner">
      <div class="card  rank-card">
        <div class="title-bar card-title">
          排行榜
        </div>
        <div class="rank-table">
          <div class="rank-table-header row vertical-middle">
            <div class="table-header">排名</div>
            <div class="table-header col-1">作平名称</div>
            <div class="table-header">编号</div>
            <div class="table-header">票数</div>
          </div>
          <Marquee>
            <div class="rank-list">
              <div class="rank-item row vertical-middle" v-for="item in list" :key="item.workNumber">
                <div class="table-col ellipsis">{{ item.rank }}</div>
                <div class="table-col col-1 ellipsis">{{ item.nickName }}</div>
                <div class="table-col ellipsis">{{ item.workNumber }}</div>
                <div class="table-col ellipsis">{{ item.ticketNum }}</div>
              </div>
            </div>
          </Marquee>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Marquee from "@/core/components/Marquee";

export default {
  name: "Rank",
  components: {
    Marquee
  },
  data() {
    return {
      /**@type {VideoRankItem[]}*/
      list: [
        {
          "rank": 1,//排名
          "workNumber": 2,//作品编号
          "nickName": "张三2",//名称
          "ticketNum": 33//票数
        },
        {
          "rank": 2,
          "workNumber": 1,
          "nickName": "1",
          "ticketNum": 6
        },
        {
          "rank": 3,
          "workNumber": 3,
          "nickName": "张三3",
          "ticketNum": 3
        },
        {
          "rank": 4,
          "workNumber": 122,
          "nickName": "张三999张三999张三999张三999张三999张三999张三999",
          "ticketNum": 0
        },
        {
          "rank": 5,
          "workNumber": 4,
          "nickName": "张三4",
          "ticketNum": 0
        },
        {
          "rank": 6,
          "workNumber": 5,
          "nickName": "张三5",
          "ticketNum": 0
        },
        {
          "rank": 7,
          "workNumber": 111,
          "nickName": "张三3",
          "ticketNum": 3
        },
        {
          "rank": 8,
          "workNumber": 134,
          "nickName": "张三999",
          "ticketNum": 0
        },
        {
          "rank": 9,
          "workNumber": 123123,
          "nickName": "张三4",
          "ticketNum": 0
        },
        {
          "rank": 10,
          "workNumber": 98,
          "nickName": "张三5",
          "ticketNum": 0
        }
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.rank-card {
  height: px2rem(1274px);
}


</style>